<template>
    <div class="layout">
        <div class="layout-ceiling">
            <div class="layout-ceiling-main">
                币安链WKC合约地址: <a :href="`https://bscscan.com/address/` + contractAddress" target="_blank" >{{contractAddress}}</a>
            </div>
        </div>
        <div class="main">
            <div class="info">
                <p>最大发行量：{{ issue_max }}</p>
                <p>当前流通量：{{ issue_amount }}</p>
                <p>已销毁量：{{ burning_amount }}</p>
                <p>最大空投量：{{ air_drop_max }}</p>
                <p>已空投量：{{ air_drop_amount }}</p>
                <p>转账奖励最大值：{{ award_max }}</p>
                <p>每笔转账奖励最大值：{{ award_max_per_trans }}</p>
                <p>已发放转账奖励：{{ award_amount }}</p>
                <p>
                    获取转账奖励需要账号余额的最小值：{{ minBalanceForAward }}
                </p>
                <p>转账时奖励比例：{{ taxFeeForAward }}/10000</p>
                <p>每质押1个BNB获取WKC数量：{{ pawnAwardAmountPerBNB }}</p>
                <p>质押BNB总量：{{ contractBNBBalance }}</p>
            </div>
            <div class="options">
                <p>空投地址：<input style="width: 300px" v-model="recipientAddress" type="text"/>
                    <button @click="mint">执行</button>
                </p>
                <p>地址余额：<input style="width: 300px" v-model="address" type="text"/>
                    <button @click="balanceOf">查询</button>
                    <span>{{ balanceOfAddress }}</span>
                </p>
                <hr/>
                <p>质押1个BNB获取{{pawnAwardAmountPerBNB}}个WKC</p>
                <p>质押BNB：<input style="width: 300px" v-model="pawnBNBValue" type="text"/>
                    <button @click="pawnBNB">质押</button>
                </p>
                <hr/>
                <p>销毁WKC数量与赎回BNB比例:</p>
                <p>{{issue_amount}}/{{contractBNBBalance}}</p>
                <p>赎回BNB：<input style="width: 300px" v-model="ransomBNBbyWKCValue" type="text"/>
                    <button @click="ransomBNBbyWKC">赎回</button>
                </p>
            </div>
        </div>
        <div class="layout-copy">WKC</div>
    </div>
</template>

<script>
import WKC from "./lib/wkc.js";

export default {
    name: "App",
    data() {
        return {
            contractAddress: "",
            totalSupply: 0,
            issue_max: 0,
            issue_amount: 0,
            air_drop_max: 0,
            air_drop_amount: 0,
            burning_amount: 0,
            minBalanceForAward: 0,
            taxFeeForAward: 0,
            pawnAwardAmountPerBNB: 0,
            contractBNBBalance:0,
            award_max:0,
            award_max_per_trans:0,
            award_amount:0,

            recipientAddress: "",
            address: "",
            balanceOfAddress: "",
            pawnBNBValue:0.1,
            ransomBNBbyWKCValue:'10000000000'
        };
    },
    components: {},
    created: function () {
        window.wkc = new WKC();
        this.contractAddress = window.wkc.contractAddress;
        window.wkc.Init(async (addr) => {
            //得到相应的钱包地址
            console.log(addr);
            this.totalSupply = await window.wkc.totalSupply();
            this.issue_max = await window.wkc.issue_max();
            this.issue_amount = await window.wkc.issue_amount();
            this.air_drop_max = await window.wkc.air_drop_max();
            this.air_drop_amount = await window.wkc.air_drop_amount();
            this.burning_amount = await window.wkc.burning_amount();
            this.minBalanceForAward = await window.wkc.minBalanceForAward();
            this.taxFeeForAward = await window.wkc.taxFeeForAward();
            this.pawnAwardAmountPerBNB = await window.wkc.pawnAwardAmountPerBNB();
            this.contractBNBBalance = await window.wkc.contractBNBBalance();
            this.award_max = await window.wkc.award_max();
            this.award_max_per_trans = await window.wkc.award_max_per_trans();
            this.award_amount = await window.wkc.award_amount();
        });
    },
    methods: {
        async mint() {
            console.log(this.recipientAddress);
            await window.wkc.mint(this.recipientAddress, 1000000000);
            this.recipientAddress = '';
        },
        async balanceOf() {
            this.balanceOfAddress = await window.wkc.balanceOf(this.address);
        },
        async pawnBNB(){
            await window.wkc.pawnBNB(this.pawnBNBValue);
        },
        async ransomBNBbyWKC(){
            await window.wkc.ransomBNBbyWKC(this.ransomBNBbyWKCValue);
        }
    },
};
</script>

<style scoped>
.layout {
    border: 1px solid #333;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}
.layout-ceiling {
    background: #464c5b;
    padding: 10px 0;
    overflow: hidden;
}
.layout-ceiling-main {
    text-align: center;
}
.layout-ceiling-main a {
    color: #9ba7b5;
}
.main {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}
.options {
    padding-left: 10px;
}
</style>
<style>
body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
}
</style>